<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            //给编码的文本框绑定blur事件
            $("#create-code").on("blur", function () {
                //获取文本
                var code = $.trim($("#create-code").val());
                //判断是否为空
                if ('' === code) {
                    $("#codeMsg").html("编码不能为空!");
                    return;
                }
                //判断该编码是重复
                $.ajax({
                    url: "settings/dictionary/type/checkCode.do",
                    data: {
                        code: code
                    },
                    type: "get",
                    success: function (data) {
                        if (data.code === 1) {
                            //提示成功
                            $("#codeMsg").html("<font color=\"green\">通过</font>");
                        } else {
                            $("#codeMsg").html(data.message)
                        }
                    }
                })
            });

            //给保存按钮绑定单击事件
            $("#saveCreateDicTypeBtn").on("click", function () {
                //先触发编码文本框的单击事件
                $("#create-code").blur();
                //获取错误信息的文本
                let msg = $("#codeMsg").text();
                if (msg !== "通过") {
                    return;
                }
                //获取数据
                let code = $.trim($("#create-code").val());
                let name = $.trim($("#create-name").val());
                let description = $.trim($("#create-description").val());

                //给后端发送保存请求
                $.ajax({
                    url: "settings/dictionary/type/saveDicType.do",
                    data: {
                        code: code,
                        name: name,
                        description: description
                    },
                    type: "post",
                    success: function (data) {
                        if (1 === data.code){
                            alert("添加成功")
                            window.location.href = "/crm/settings/dictionary/type/index.do"
                        }
                        else{
                            alert(data.message);
                        }
                    }
                })
            })

        })
    </script>
</head>
<body>

<div style="position:  relative; left: 30px;">
    <h3>新增字典类型</h3>
    <div style="position: relative; top: -40px; left: 70%;">
        <button id="saveCreateDicTypeBtn" type="button" class="btn btn-primary">保存</button>
        <button type="button" class="btn btn-default" onclick="window.history.back();">取消</button>
    </div>
    <hr style="position: relative; top: -40px;">
</div>
<form class="form-horizontal" role="form">

    <div class="form-group">
        <label for="create-code" class="col-sm-2 control-label">编码<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="create-code" style="width: 200%;">
            <span id="codeMsg" style="color: red"></span>
        </div>
    </div>

    <div class="form-group">
        <label for="create-name" class="col-sm-2 control-label">名称</label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="create-name" style="width: 200%;">

        </div>
    </div>

    <div class="form-group">
        <label for="create-description" class="col-sm-2 control-label">描述</label>
        <div class="col-sm-10" style="width: 300px;">
            <textarea class="form-control" rows="3" id="create-description" style="width: 200%;"></textarea>
        </div>
    </div>
</form>

<div style="height: 200px;"></div>
</body>
</html>